<template>
  <aside class="aside_container">
    <div class="aside_inner">
      <!-- Logo链接 - 在最上方 -->
      <a class="aside_logo" href="#screen_1" @click.prevent="scrollToTop">
        <div class="aside_logo_in">
          <img class="svg" src="@/assets/images/logo.svg" alt="Sangyie">
        </div>
      </a>

      <!-- 社交媒体链接列表 -->
      <ul class="aside_list">
        <li v-for="item in socialItems" :key="item.id">
          <a 
            :href="item.url" 
            :target="item.target || '_blank'"
            class="aside_list_link"
          >
            {{ item.name }}
          </a>
        </li>
      </ul>
    </div>
  </aside>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'

// 声明全局类型
declare global {
  interface Window {
    scrollToSection?: (sectionId: string) => boolean | void;
  }
}

interface SocialItem {
  id: number
  name: string
  url: string
  target?: string
}

const router = useRouter()
const route = useRoute()

const socialItems: SocialItem[] = [
  { id: 1, name: 'Instagram', url: 'https://www.instagram.com/', target: '_blank' },
  { id: 2, name: 'linkedin', url: 'https://www.linkedin.com/', target: '_blank' },
  { id: 3, name: 'Facebook', url: 'https://www.facebook.com/', target: '_blank' },
]

const scrollToTop = () => {
  // 检查当前是否在主页
  if (route.path !== '/') {
    // 如果不在主页，先导航到主页，然后滚动到首页section
    document.body.style.overflow = 'hidden' // 恢复主页的滚动设置
    router.push('/').then(() => {
      setTimeout(() => {
        if (window.scrollToSection) {
          window.scrollToSection('home')
        }
      }, 100)
    })
  } else {
    // 如果已经在主页，直接滚动到首页
    if (window.scrollToSection) {
      window.scrollToSection('home')
    } else {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
}
</script>

<style scoped>
/* 样式已在全局 aftech-styles.css 中定义 */
/* 组件特定样式可以在这里添加 */
</style>

